<template>
    <div class="index">
        <div>
            <SongLeft :picUrl="songDetail.album.picUrl" :simiSong="simiSong" :songDetail="songDetail"></SongLeft>
        </div>
        <div>
            <SongCenter :lyric="lyric" :songDetail="songDetail"></SongCenter>
        </div>
        <div>
            <SongRight :singerId="songDetail.singer[0].id" v-if="songDetail.singer[0].id"></SongRight>
        </div>
    </div>
</template>

<script setup>
import SongLeft from '@/components/song/SongLeft.vue'
import SongCenter from '@/components/song/SongCenter.vue'
import SongRight from '@/components/song/SongRight.vue'
import { ref, onMounted } from 'vue'
import { getSongDetail, getSongLyric, getSimiSong } from '@/api/song'
import { useRoute } from 'vue-router'
import { formatSongDetail } from '@/utils/util'
import { parseLyric } from '@/utils/lyric'
const route = useRoute()
const id = ref('')
const songDetail = ref({
    album: {
        picUrl: ''
    },
    singer: [{
        id: ''
    }]
})
const lyric = ref([])
const simiSong = ref([])
onMounted(async () => {
    id.value = route.query.id

    const res = await getSongDetail(id.value)
    songDetail.value = formatSongDetail(res.songs[0])
    const lrc = await getSongLyric(id.value)
    if (lrc.lrc) {
        lyric.value = parseLyric(lrc.lrc.lyric)
    } else {
        lyric.value = parseLyric("[00:00.000] 暂无歌词")
    }
    const simi = await getSimiSong(id.value)
    simiSong.value = simi.songs
    simiSong.value.forEach(item => {
        item = formatSongDetail(item)
    })
})
</script>

<style lang="less" scoped>
.index {
    display: flex;
    justify-content: space-between;

    div {
        flex: 1;
    }
}
</style>